<template>
  <div class="hello">
    <!-- 前六个 -->
    <el-col :span="6">
      <div
        :class="[
          item == style ||
          item == style1 ||
          item == style2 ||
          item == style3 ||
          item == style4 ||
          item == style5 ||
          item == style6 ||
          item == style7 ||
          item == style8 ||
          item == style9 ||
          item == style10 ||
          item == style11 ||
          item == style12
            ? 'styleGg'
            : '',
        ]"
        v-for="item in 6"
        :key="item"
      >
        <div>
          <span
            style="padding-right: 6px; color: red; cursor: pointer"
            @click="sw(item)"
            >{{ item }}</span
          >
          <div>
            <!-- 下拉框 -->
            <el-select
              v-model="record[item]"
              placeholder="请选择"
              style="width: 120px; margin-right: 8px"
            >
              <el-option-group
                v-for="group in options"
                :key="group.label"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-option-group>
            </el-select>
            <!-- 按钮 -->
            <el-radio-group
              @change="recordFun"
              v-model="radio[item]"
              size="small"
            >
              <el-radio-button size="mini" :label="item + 100"
                >未知1</el-radio-button
              >
              <el-radio-button size="mini" :label="item + 200"
                >未知2</el-radio-button
              >
              <el-radio-button size="mini" label="北京"></el-radio-button>
              <el-radio-button size="mini" label="广州"></el-radio-button>
              <el-radio-button size="mini" label="深圳"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <textarea
          name="textRecord"
          cols="60"
          rows="3"
          style="resize: none"
        ></textarea>
      </div>
    </el-col>
    <!-- 后六个 -->
    <el-col :span="6">
      <div
        :class="[
          item + 6 == style ||
          item + 6 == style1 ||
          item + 6 == style2 ||
          item + 6 == style3 ||
          item + 6 == style4 ||
          item + 6 == style5 ||
          item + 6 == style6 ||
          item + 6 == style7 ||
          item + 6 == style8 ||
          item + 6 == style9 ||
          item + 6 == style10 ||
          item + 6 == style11 ||
          item + 6 == style12
            ? 'styleGg'
            : '',
        ]"
        v-for="item in 6"
        :key="item"
      >
        <span
          v-if="item < 4"
          style="padding-right: 10px; color: red; cursor: pointer"
          @click="sw(item + 6)"
          >{{ item + 6 }}</span
        >
        <span
          v-else
          style="padding-right: 1px; color: red; cursor: pointer"
          @click="sw(item + 6)"
          >{{ item + 6 }}</span
        >
        <div>
          <!-- 下拉框 -->
          <el-select
            v-model="record[item + 6]"
            placeholder="请选择"
            style="width: 120px; margin-right: 8px"
          >
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
          <!-- 按钮 -->
          <el-radio-group
            @change="recordFun"
            v-model="radio[item + 6]"
            size="small"
          >
            <el-radio-button size="mini" :label="item + 106"
              >未知1</el-radio-button
            >
            <el-radio-button :label="item + 206">未知2</el-radio-button>
            <el-radio-button :label="(item + 6) * 345">北京</el-radio-button>
            <el-radio-button :label="(item + 6) * 678">广州</el-radio-button>
            <el-radio-button :label="(item + 6) * 987">深圳</el-radio-button>
          </el-radio-group>
        </div>
        <textarea
          cols="60"
          name="textRecord"
          rows="3"
          style="resize: none"
        ></textarea>
      </div>
    </el-col>

    <el-col :span="24">
      <el-popover placement="top" width="160" v-model="reset">
        <p id="p1">确定清空吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="reset = false"
            >取消</el-button
          >
          <el-button type="primary" size="mini" @click="resetting()"
            >确定</el-button
          >
        </div>
        <el-button type="warning" slot="reference">清空</el-button>
      </el-popover>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "v-kill",
  props: {
    logs: {
      type: Array,
    },
  },
  data() {
    return {
      _forms: this._form,
      reset: false,
      style: 0,
      style1: 0,
      style2: 0,
      style3: 0,
      style4: 0,
      style5: 0,
      style6: 0,
      style7: 0,
      style8: 0,
      style9: 0,
      style10: 0,
      style11: 0,
      style12: 0,
      styleGg: "styleGg",
      status: ["未知", "123", "456", "789", "147", "258", "未知"],
      styleCss: [
        "d1",
        "d2",
        "d3",
        "d4",
        "d5",
        "d6",
        "d7",
        "d8",
        "d9",
        "d10",
        "d11",
        "d12",
      ],
      options: [
        {
          label: "第一方",
          options: [
            {
              value: "white",
              label: "white",
            },
            {
              value: "kill",
              label: "kill",
            },
          ],
        },
        {
          label: "第二方",
          options: [
            {
              value: "a",
              label: "a",
            },
            {
              value: "b",
              label: "b",
            },
            {
              value: "c",
              label: "c",
            },
            {
              value: "d",
              label: "d",
            },
          ],
        },
        {
          label: "第三方",
          options: [
            {
              value: "e",
              label: "e",
            },
            {
              value: " ",
              label: " ",
            },
          ],
        },
      ],
      radio: [{ radio1: "未知" }, { radio2: "未知" }],
      record: [{ record1: "" }, { record2: "" }],
      killWuwu: "1",
      killName: [],
    };
  },
  watch: {
    logs: {
      handler() {
        // console.log("watch", this.logs);
        this.logs.forEach((res) => {
          let arr = [];
          let array = [];
          res.day_s.forEach((ree) => {
            arr.push(ree.type.length);
            array.push({ name: ree.select, number: ree.type.length });
          });
          arr.push(res.day_t1.length);
          array.push({ name: res.day_s1, number: res.day_t1.length });
          arr.push(res.day_t2.length);
          array.push({ name: res.day_s2, number: res.day_t2.length });
          let len = arr.length;
          for (var i = 0; i < len - 1; i++) {
            for (var j = 0; j < len - 1 - i; j++) {
              if (arr[j] < arr[j + 1]) {
                // 相邻元素两两对比
                var temp = arr[j + 1]; // 元素交换
                arr[j + 1] = arr[j];
                arr[j] = temp;
              }
            }
          }
          array.forEach((res) => {
            if (res.number == arr[0] && arr[0] != arr[1]) {
              this.killName = [
                { day: this.logs[this.logs.length - 1].day, name: res.name },
              ];
            }
          });
        });
      },
      deep: true,
    },
    killName() {
      //cssStyle
      // if(this.killName[0].day == 1)
      // this.style = this.killName[0].name;
      // else if(this.killName[0].day == 2)
      // this.style1 = this.killName[0].name;
      // else if(this.killName[0].day == 3)
      // this.style2 = this.killName[0].name;
      switch (this.killName[0].name) {
        case 1:
          this.style1 = this.killName[0].name;
          break;
        case 2:
          this.style2 = this.killName[0].name;
          break;
        case 3:
          this.style3 = this.killName[0].name;
          break;
        case 4:
          this.style4 = this.killName[0].name;
          break;
        case 5:
          this.style5 = this.killName[0].name;
          break;
        case 6:
          this.style6 = this.killName[0].name;
          break;
        case 7:
          this.style7 = this.killName[0].name;
          break;
        case 8:
          this.style8 = this.killName[0].name;
          break;
        case 9:
          this.style9 = this.killName[0].name;
          break;
        case 10:
          this.style10 = this.killName[0].name;
          break;
        case 11:
          this.style11 = this.killName[0].name;
          break;
        case 12:
          this.style12 = this.killName[0].name;
          break;
      }

      this.$emit("child-says", this.killName); // 将数据传给父组件
    },
  },
  methods: {
    resetting() {
      let textRecords = document.getElementsByName("textRecord");
      textRecords.forEach((res) => {
        res.value = "";
      });
      (this.record = [{ record1: "" }, { record2: "" }]),
        (this.radio = [{ radio1: "未知" }, { radio2: "未知" }]),
        (this.reset = false);
    },
    selectRecord(key) {
      this.record;
    },
    recordFun(label) {
      if (13 > label - 100 > 0) {
        // 未知1
        const a = label - 100;
        let yyj = [];
        yyj.push({ name: "第一个", number: a });
        this.$emit("child-sayz", yyj);
      } else if (13 > label - 200 > 0) {
        // 未知2
        const a = label - 200;
        let yyj = [];
        yyj.push({ name: "第二个", number: a });
        this.$emit("child-sayx", yyj);
      }
    },
    sw(item) {
      this.$confirm("此操作将永久杀死对方, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          switch (item) {
            case 1:
              this.style1 = item;
              break;
            case 2:
              this.style2 = item;
              break;
            case 3:
              this.style3 = item;
              break;
            case 4:
              this.style4 = item;
              break;
            case 5:
              this.style5 = item;
              break;
            case 6:
              this.style6 = item;
              break;
            case 7:
              this.style7 = item;
              break;
            case 8:
              this.style8 = item;
              break;
            case 9:
              this.style9 = item;
              break;
            case 10:
              this.style10 = item;
              break;
            case 11:
              this.style11 = item;
              break;
            case 12:
              this.style12 = item;
              break;
          }
          this.$message({
            type: "success",
            message: "成功杀死!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已回心转意",
          });
        });
    },
  },
};
</script>

<style scoped>
.hello {
  text-align: center;
}
.styleGg {
  background-color: black;
}
#p1 {
  color: rebeccapurple;
}
</style>
